input[type='checkbox'] {
  pointer-events: none;
  opacity: 0;
  margin: 16px 2px 0 0;
  position: absolute;

  & + label {
    display: block;
    line-height: 20px;
    margin-bottom: 0;
    padding: 0 0 0 28px;
    position: relative;
    cursor: pointer;

    &:before,
    &:after {
      content: ' ';
      height: 22px;
      width: 22px;
      top: -1px;
      left: -1px;
      position: absolute;
      display: block;
      box-sizing: border-box;
      transition-property: box-shadow;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
      transition-duration: 167ms;
    }

    &:before {
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6) inset;
      border: 1px solid transparent;
      border-radius: 4px;
      background-clip: padding-box;
      padding: 2px;
    }

    &:after {
      display: none;
      height: 16px;
      width: 16px;
      overflow: hidden;
      margin: 3px;
    }
  }

  &:checked + label {
    &:before {
      box-shadow: 0 0 0 11px get-color(blue7) inset;
    }

    &:after {
      display: block;
      background-image: url('');
      color: white;
      font-weight: 200;
      display: block;
    }
  }
}

input[type='checkbox'] + label.checkbox-input__wrapper {
  $checkbox-width: 28px;
  $container-margin: item-spacing(4);
  display: flex;
  padding: item-spacing(2) $container-margin item-spacing(2) ($container-margin + $checkbox-width);
  box-sizing: content-box;
  margin: 0 (-1 * $container-margin);

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  &:before,
  &:after {
    left: $container-margin;
    top: item-spacing(2) - 1;
  }
}
